Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Unique Layouts
We can add layouts with various rows and columns.
The number of columns a column take can be set according to breakpoints:
<template>
<v-container class="grey lighten-5">
<v-row>
<v-col cols="12" md="8">
<v-card class="pa-2" outlined tile>.col-12 .col-md-8</v-card>
</v-col>
<v-col cols="6" md="4">
<v-card class="pa-2" outlined tile>.col-6 .col-md-4</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have a row with columns that have different sizes.
The first column takes 12 columns by default and takes 8 if it’s md and up.
The 2nd takes 6 columns by default and takes 4 if it’s md and up.
The columns will be rearranged so that they always fit on the screen.
Vertical Alignment
We can change the vertical alignment of flex items and their parents with the align and align-self props.
For example, we can write:
<template>
<div>
<v-container class="grey lighten-5 mb-6">
<v-row align="start" no-gutters>
<v-col v-for="n in 3" :key="n" cols="2">
<v-card class="pa-2" outlined tile>column</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the v-col components with the align prop to put the columns on the left.
Other values for align include center to put items in the center and end to put the columns at the end.
Horizontal Alignment
The horizontal alignment of flex items with the justify property:
<template>
<div>
<v-container class="grey lighten-5 mb-6">
<v-row justify="start" no-gutters>
<v-col v-for="n in 3" :key="n" cols="2">
<v-card class="pa-2" outlined tile>column</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
No Gutters
The no-gutters prop remove the gutters between the columns:
<template>
<v-container class="grey lighten-5">
<v-row no-gutters>
<v-col cols="12" sm="5" md="6">
<v-card class="pa-2" outlined tile>col</v-card>
</v-col>
<v-col cols="6" md="6">
<v-card class="pa-2" outlined tile>col</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Column Wrapping
If there are more than 12 columns in a row, then the extra columns will wrap onto a new line.
Order Classes
We can change the order of the grid items with the order prop on the v-col :
<template>
<v-container class="grey lighten-5">
<v-row no-gutters>
<v-col>
<v-card class="pa-2" outlined tile>First, but unordered</v-card>
</v-col>
<v-col order="3">
<v-card class="pa-2" outlined tile>Second, but last</v-card>
</v-col>
<v-col order="1">
<v-card class="pa-2" outlined tile>Third, but first</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Conclusion
We can create layout with various flexbox classes and props.
